/* 我的页面CSS */

/* 头部 */
header{
  height: 3.5rem;
}
header .vance{
  width: 6.9rem;
  height: 3.46rem;
  border-radius: .1rem;
  background-image: url(../images/mine_pic01.png);
  background-size: 100%;
  position: relative;
  margin-top: 1.42rem;
  margin-left: .3rem;
  box-shadow: 0 .05rem .1rem .05rem #ccc;
}
.vance .touxiang{
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 0;
  left: .3rem;
  transform: translateY(-50%);
}
.vance .touxiang a{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.vance .touxiang a img{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.vance .vright{
  width: 1rem;
  height: 2.06rem;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: .3rem .1rem .1rem .3rem;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: .47rem 0;
  box-sizing: border-box;
}
.vance .vright a{
  display: block;
  width: .34rem;
  height: .38rem;
}
.vance .vright a img{
  display: block;
  width: 100%;
  height: 100%;
}
.vance h2{
  width: 100%;
  text-align: center;
  font-size: .4rem;
  color: white;
  padding-top: .2rem;
}
.vance h2 a{
  display: inline-block;
  width: 1.14rem;
  height: .5rem;
  background-color: #a4bdff;
  border-radius: .5rem;
  font-size: .2rem;
  color: white;
  text-align: center;
  line-height: .5rem;
  margin-left: .3rem;
  font-weight: normal;
}
.vance>p{
  width: 4.85rem;
  margin: .5rem 0 .4rem .6rem;
  font-size: .22rem;
  color: white;
  line-height: .36rem;
}
.vance .vbottom{
  width: 5.28rem;
  margin-left: .48rem;
  display: flex;
  justify-content: space-between;
}
.vance .vbottom p{
  font-size: .28rem;
  color: white;
}
.vance .vbottom p span{
  display: block;
  font-size: .36rem;
  margin-top: .16rem;
}

/* 我的功能 */
.mine{
  width: 100%;
  margin-top: 2.5rem;
  display: flex;
}
.mine dl{
  width: 1.5rem;
  height: 7.5rem;
  margin-left: .3rem;
  margin-right: .4rem;
  border-radius: 0 .3rem 0 0;
  overflow: hidden;
  background-color: #524cb4;
}
.mine dl dt{
  width: 100%;
  height: 1.4rem;
  background-color: #524cb4;
  cursor: pointer;
}
.mine dl dt:nth-child(3),
.mine dl dt:nth-child(7){
  background-color: #393484;
}
.mine dl dt .borderbg{
  width: 100%;
  height: 100%;
  border-radius: 0 .3rem 0 0;
  background-color: #393484;
  display: flex;
}
.mine dl dt:nth-child(3) .borderbg,
.mine dl dt:nth-child(7) .borderbg{
  background-color: #524cb4;
}
.mine dl dt .borderbg img{
  display: block;
  width: .64rem;
  height: .65rem;
  margin: auto;
}
.mine dl dd{
  width: 100%;
  height: .5rem;
  background-color: #393484;
}
.mine dl dd:nth-child(4n){
  background-color: #524cb4;
}
.mine dl dd p{
  font-size: .28rem;
  color: white;
  text-align: center;
}

.mine .content {
  width: 5rem;
}
.content .show {
  display: block;
}
.content ul {
  display: none;
  width: 100%;
}
.content ul .rest{
  width: 100%;
  height: 1.57rem;
  border-radius: .1rem;
  margin-bottom: .15rem;
  background-image: url(../images/mine_pic02.png);
  background-size: 100%;
  padding: .26rem 0;
  box-sizing: border-box;
}
.content ul .rest .rtop{
  width: 100%;
  padding-left: .3rem;
  box-sizing: border-box;
  display: flex;
}
.content ul .rest .rtop p{
  font-size: .28rem;
  color: white;
  margin-right: .3rem;
}
.content ul .rest .rtop .switch {
  position: relative;
  display: inline-block;
  width: .6rem;
  height: .34rem;
}
.switch input {
  display: none;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: .34rem;
  background-color: #ccc;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: .26rem;
  width: .26rem;
  left: .04rem;
  bottom: .04rem;
  border-radius: 50%;
  background-color: white;
  transition: .4s;
}
input:checked+.slider {
  background-color: #2196F3;
}
input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
  transform: translateX(.26rem);
}
.content ul .rest>p{
  font-size: .37rem;
  color: white;
  padding-left: .3rem;
  box-sizing: border-box;
  margin-top: .3rem;
}
.content ul li{
  width: 5rem;
  height: 1.28rem;
  border-radius: .1rem;
  background-color: #615d9d;
  display: flex;
  align-items: center;
  padding: 0 .3rem 0 .2rem;
  box-sizing: border-box;
  margin-bottom: .15rem;
}
.content ul li:nth-child(2n+1){
  background-color: #393484;
}
.content ul li .colorbox{
  width: .34rem;
  height: .34rem;
  margin-right: .2rem;
}
.content ul li .colorbox .top{
  width: 100%;
  height: 37%;
}
.content ul li .colorbox .bot{
  width: 100%;
  height: 63%;
  display: flex;
}
.content ul li .colorbox .bot .botleft{
  width: 46.3%;
  height: 100%;
}
.content ul li .colorbox .bot .botright{
  width: 53.7%;
  height: 100%;
}
.color1{
  background-color: #8e1e74;
}
.color2{
  background-color: #1788a1;
}
.color3{
  background-color: #6e31ce;
}
.color4{
  background-color: #9d75de;
}
.color5{
  background-color: #982888;
}
.color6{
  background-color: #783be1;
}
.color7{
  background-color: #2850ce;
}
.color8{
  background-color: #325ae1;
}
.color9{
  background-color: #2192b5;
}
.content ul li .text{
  margin-right: auto;
}
.content ul li .text .hotel{
  font-size: .28rem;
  color: white;
  margin-bottom: .05rem;
}
.content ul li .text .address{
  font-size: .2rem;
  color: white;
}
.content ul li .text .address .iconfont{
  font-size: .26rem;
  margin-right: .02rem;
}
.content ul li .price{
  font-size: .3rem;
  color: white;
  text-align: center;
}
.content ul li .price span{
  display: block;
  font-size: .17rem;
}


/* 底部 */
footer .navul li:nth-child(5) .iconfont{
  color: #76d3ff;
}
footer .navul li:nth-child(5) p{
  color: #76d3ff;
}